<template>
  <div class="box">
    <header class="header">
      <ul>
        <li class="iconfont icon-daohang" @click="$router.push('/kind')"></li>
        <li>
          <!-- <div class="white iconfont icon-fangdajing" @click="search"></div> -->
          <router-link to="/search" tag="div" class="white iconfont icon-fangdajing"></router-link>
        </li>
        <li v-if="isLogin" class="my">我的</li>
        <li v-else class="my">登录</li>
      </ul>
    </header>
    <div class="content" ref="content">
      <!-- 下啦刷新 -->
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" ref="content">
          <van-swipe-item v-for="item of bannerList" :key="item.bannerid">
            <van-image fit="contain" :src="item.img"/>
          </van-swipe-item>
        </van-swipe>
        <!-- nav导航 -->
        <van-grid icon-size="44" column-num="5" :border="false">
          <van-grid-item v-for="item of navList" :key="item.navid" :icon="item.imgurl" :text="item.title" />
        </van-grid>
        <!-- 秒杀列表 -->
        <div class="seckillBox">
          <div class="title_wrap">
            <div class="title_wrap_title">嗨购秒杀</div>
            <div class="title_wrap_timer">
              <div class="title_wrap_timer_sec">
                {{ hour | hourFilter }}
              </div>
              <div class="timeCountDown">
                <van-count-down :time="time">
                  <template #default="timeData">
                    <span class="block">{{ timeData.hours }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.minutes }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.seconds }}</span>
                  </template>
                </van-count-down>
              </div>
            </div>
            <div class="seckillMore">更多秒杀<van-icon size="14" name="clock" /></div>
          </div>
          <ul class="seckillList">
            <router-link :to="{ name: 'detail', params: { proid: item.proid }}"
            tag="li" class="seckillItem" v-for="item of seckillList" :key="item.proid">
              <van-image :src="item.img1"></van-image>
              <p class="price">¥{{ (item.originprice * item.discount / 10).toFixed(0) }}</p>
              <p class="delPrice"><del>¥{{ item.originprice }}</del></p>
            </router-link>
          </ul>
        </div>
        <!-- 产品列表 -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad"
        >
          <ProList :proList1="proList"/>
        </van-list>
      </van-pull-refresh>
      <!-- 返回顶部 -->
      <div class="backtop" @click="backTop" v-if="top > 500">
        <van-icon name="back-top" size="36"/>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { List, PullRefresh, Swipe, SwipeItem, Grid, GridItem, Image as VanImage, CountDown, Icon } from 'vant'
import { getBannerList, getProList, getSeckillList, getDateilList } from './../../api/home'
import ProList from './../../components/listPage.vue'
import { mapState } from 'vuex'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(PullRefresh)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(VanImage)
Vue.use(CountDown)
Vue.use(Icon)
Vue.use(List)
Vue.use(getDateilList)
export default {
  computed: {
    ...mapState ({
      isLogin:state => state.isLogin
    }) 
    // isLogin () {
    //   return this.$store.state.isLogin
    // }
  },
  components: {
    ProList
  },
  data () {
    return {
      navList: [
        { navid: 1, title: '嗨购超市', imgurl: 'https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/125678/35/5947/4868/5efbf28cEbf04a25a/e2bcc411170524f0.png' },
        { navid: 2, title: '数码电器', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg' },
        { navid: 3, title: '嗨购服饰', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg' },
        { navid: 4, title: '嗨购生鲜', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg' },
        { navid: 5, title: '嗨购到家', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg' },
        { navid: 6, title: '充值缴费', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg.dpg' },
        { navid: 7, title: '9.9元拼', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/36069/14/16068/6465/60ec0f67E155f9488/595ff3e606a53f02.png!q70.jpg.dpg' },
        { navid: 8, title: '领券', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png!q70.jpg.dpg' },
        { navid: 9, title: '领金贴', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg.dpg' },
        { navid: 10, title: 'plus会员', imgurl: '//m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png!q70.jpg.dpg' }
      ],
      bannerList: [],
      second: 0,
      minute: 0,
      hour: 0,
      time: 102 * 1000,
      seckillList: [],
      proList: [],
      // 上拉加载
      loading: false,
      finished: false,
      count: 2, // 页码
      seckillCount: 1,
      limitNum: 6,
      // 下拉刷新
      isLoading: false,
      // 监听滚动条的距离
      top: 0
    }
  },
  methods: {
    backTop () {
      this.$refs.content.scrollTop = 0
    },
    onRefresh () {
      this.isLoading = true
      // 实际上就是请求了第一页的数据，将列表的数据替换为第一页的数据
      getProList().then(res => {
        this.isLoading = false
        this.proList = res.data.data
        // 假设上次上拉时 页码为5，下拉刷新相当于请求第一页，需要页码重置
        // 重置finished的值
        this.count = 2
        this.finished = false
      })
    },
    onLoad () {
      // List 组件通过 loading 和 finished 两个变量控制加载状态，
      // 当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。
      // 此时可以发起异步操作并更新数据，数据更新完毕后，
      // 将 loading 设置成 false 即可。若数据已全部加载完毕，
      // 则直接将 finished 设置成 true 即可。
      this.loading = true
      // 其实就是分页
      getProList({ count: this.count }).then(res => {
        console.log(res.data.data)
        this.loading = false // 请求完成
        this.count++ // 请求完成 页码要加1
        if (res.data.data.length === 0) {
          this.finished = true // 没有数据了
        } else {
          // 请求到数据,数组合并 concat
          this.proList = [...this.proList, ...res.data.data]
        }
      })
    }
  },
  created () {
    getBannerList().then(res => {
      // console.log(res.data)
      this.bannerList = res.data.data
    })
    getSeckillList({ count: this.seckillCount, limitNum: this.limitNum }).then(res => {
      // console.log(this.seckillCount, this.limitNum)
      // console.log(res.data.data)
      // console.log(res)
      this.seckillList = res.data.data
    })
    getProList().then(res => {
      // console.log(res.data.data)
      this.proList = res.data.data
    })
  },
  mounted () {
    const date = new Date()
    // console.log(date.getHours())
    this.hour = date.getHours() // 当前是几点
    this.minute = date.getMinutes()
    this.second = date.getSeconds()
    // console.log(hour);
    if (this.hour % 2 === 0) {
      this.time = (3600 * 2 - (this.minute * 60 + this.second)) * 1000
    } else {
      this.time = (3600 - (this.minute * 60 + this.second)) * 1000
    }
    // 假设现在是 17:58 time时间因该为2
    // 假设现在的 16:58 time时间应该为62

    // 监听滚动条的滚动
    this.$refs.content.addEventListener('scroll', () => {
      this.top = this.$refs.content.scrollTop
      // console.log('top', this.top)
    })
  }
}
</script>
<style scoped lang="stylus">
.container .box .header
  background #c82519
.white.iconfont.icon-fangdajing
  position:relative
  left 10px
.box
  overflow auto
  background rgb(246,246,246)
  header
    ul
      display flex
      justify-content space-around
      align-items center
      height 100%
      li
        display flex
        justify-content space-around
        &:nth-child(1)
          width 40px
          color white
        &:nth-child(3)
          width 80px
        &:nth-child(2)
          flex 1
          height 34px
        .white
          width 245px
          height 34px
          background white
          border-radius 20px
          &:before
            position relative
            top 10px
            left 15px
.content
  overflow auto
.my-swipe
  .van-swipe-item
    color #fff
    height 220px
    text-align center
    background-color #39a9ed
    .van-image
      width 100%
      .van-image__img
        width 100%
.van-grid-item__content
  padding 8px 8px
  background-color transparent
// 倒计时样式
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}

.seckillBox
  width 94%
  margin 10px 3%
  background-color #ffffff
  height 1.3rem
  border-radius 15px
  .title_wrap
    height 0.4rem
    background url('') no-repeat
    background-size contain
    .title_wrap_title
      float: left;
      display: inline-block;
      height: 0.3rem;
      margin-top: 0.05rem;
      margin-right: 0.1rem;
      margin-left: 0.15rem;
      font-family: "微软雅黑";
      font-size: .16rem;
      color: #333;
      letter-spacing: 0;
      line-height: 0.3rem;
      font-weight bold
    .title_wrap_timer
      float left
      display inline-block
      vertical-align middle
      line-height 0.4rem
      height 0.4rem
      .title_wrap_timer_sec
        height: 100%;
        border-radius: 5px;
        font-size: 0.14rem;
        color: #ff2727;
        letter-spacing: 0;
        // padding-right: 0.1rem;
        // padding-left: 0.1rem;
        float: left;
        position: relative;
        left: -1px;
        // margin-right: .2rem;
        line-height: 0.4rem;
        &:after
          height: 0.2rem;
          width: 0.2rem;
          content: "";
          display: inline-block;
          vertical-align: middle;
          background-image: url(//wq.360buyimg.com/wxsq_project/portal/m_jd_index/images/seckill-time-to_1de70c91.png);
          background-repeat: no-repeat;
          // background-position: 10%;
          background-size: contain;
      .timeCountDown
        float left
        padding-top 0.1rem
        width 1rem
        transform scale(0.8)
    .seckillMore
      float right
      color #f66
      line-height 0.4rem
      padding-right 0.2rem
      font-size 0.12rem
      .van-icon-clock
        transform rotate(-135deg)
        margin 0.02rem
.seckillList
  display flex
  .seckillItem
    flex 1
    display flex
    justify-content center
    align-items center
    flex-direction column
    .van-image__img
      width 50px
      height 50px
      margin 0 auto
      display block
    .price
      font-size 12px
      color #f66
      text-align center
      margin-top 8px
    .delPrice
      font-size 12px
      color #666
      text-align center

.backtop
  position fixed
  bottom 52px
  right 10px
  width 40px
  height 40px
  background-color #fff
  border-radius 50%
  display flex
  justify-content center
  align-items center
  color #666

.my
  color white
  font-size 18px
</style>
